<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <!-- <a-page-header title="返回" @back="() => $router.go(-1)" /> -->
    <a-form-model
      :model="info"
      ref="ruleForm"
      :rules="rules"
      @submit.native.prevent
      v-if="JSON.stringify(info) != '{}' && info"
    >
      <a-form-model-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="actName">
        <a-input size="large" v-model="info.actName" />
      </a-form-model-item>
      <a-form-model-item label="活动描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="desc">
        <a-textarea v-model="info.desc" :rows="5" />
      </a-form-model-item>
      <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
        <single-image :url="info.img" @ok="(url) => (info.img = url)"></single-image>
        <span>（建议224px * 120px的图片, 长图468px * 120px）</span>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
          >保存</a-button
        >
        <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import SingleImage from '@/components/Upload/SingleImage'

export default {
  name: 'JutuikeActEdit',
  components: {
    SingleImage
  },
  data() {
    return {
      id: this.$route.params.id || '',
      info: {},
      userList: [],
      rules: {
        actName: [{ required: true, message: '活动名称必填', trigger: ['blur', 'change'] }],
        desc: [{ required: true, message: '活动描述必填', trigger: ['blur', 'change'] }]
      },
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
    }
  },
  created() {},
  mounted() {
    // 获取信息
    this.formInit()
  },
  methods: {
    formInit() {
      // 获取信息
      if (this.id >= 0) {
        this.getInfo()
      } else {
        this.info = {
          actName: '',
          desc: '',
          img: ''
        }
      }
    },
    // 编辑信息
    getInfo() {
      this.$common.handleGet('/jutuike/actDetail?actId=' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          this.info = result
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'JutuikeActList' })
        }
      })
    },

    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid && this.id >= 0) {
          handleFormData('/jutuike/actUpdate')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      this.$common
        .handlePost(url, this.info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 跳转到目的路由
              this.$router.push({ name: 'JutuikeActList' })
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>

<style scoped lang="less"></style>
